<template>
  <div class="product_trans">
    <p class="title">转化率</p>
    <div class="form_search">
      <el-form>
        <el-select v-model="cycle" placeholder="周期" class="cycle" @change="changeCycle">
          <el-option v-for="item in cycleList" :key="item.value" :value="item" :label="item.label"></el-option>
        </el-select>
        <div class="createTime timePicker" style="width: 100%">
          <el-input v-if="dateType !== 'yearrange' && dateType !== 'quartrange'" v-model="form.local_time.value"  placeholder="选择日期"></el-input>
          <el-date-picker  @change="changeTime"  v-model="timePicker" :pickerOptions="pickerOptions"
            :type="dateType" range-separator="-"   prefix-icon="0" start-placeholder="开始日期"
          :value-format="timeFormat" end-placeholder="结束日期" placeholder="选择日期"></el-date-picker>
        </div>
        <el-select  v-model="form.site.value" placeholder="站点" clearable  @keyup.enter.native="getData" @focus="getSiteList">
          <el-option v-for="item in siteList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
        <el-select  v-model="form.product_name.value" placeholder="产品型号名称" clearable  @keyup.enter.native="getData" @focus="getProductModelName" >
          <el-option v-for="item in productModelNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </el-form>
      <div class="form_btn">
        <el-button type="search" icon="iconfont icon-search_normal" @click="getData"></el-button>
        <el-button  icon="iconfont icon-Refresh" @click="resetForm"></el-button>
      </div>
    </div>
  
    <div id="charts_product_trans" :style="'height:' + chartsH + 'px'"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { siteSiteList } from '@/api/manage/site.js'
import { productModelNameList } from '@/api/product/productBasic.js'
import { productTrans } from '@/api/kanban/index.js'
import { setSearchParams, timeTransfor, timeFormat, setEchartsOptionsDatazoom, setPickerOptions ,transforTime, setEchartsTooltip } from '@/utils/index.js'
import { mapGetters } from 'vuex'
import mixin from './mixin'

export default {
  mixins: [mixin],
  data () {
    return {
      timePicker: '',
      timeFormat: 'yyyy-MM-dd',
      cycle: '日',
      form: {
        local_time: { value: '', op: 'RANGE' },
        site: { value: '', op: '=' },
        product_name: { value: '', op: '=' },
      },
      siteList: [],
      productModelNameList: [],
      xAxis:[],
      seriesData:[],
      chart: null,
      loading: false,
      pickerOptions: setPickerOptions(),
      chartsH: ''
    }
  },
  props: ['show'],
  computed: {
    ...mapGetters(['sidebar', ]),
    isCollapse(){
      return !this.sidebar.opened
    }
  },
  watch : {
    show: function() {
      if(this.show) {
        this.getData()
        this.setHeight()
      }
    },
     isCollapse: function () {
      this.drawEcharts()
    }
  },
  created () {
    this.setDateCur()
  },
  methods: {
    setHeight () { //图表高度
      this.$nextTick(()=>{ 
        let kanban_product = document.getElementsByClassName("kanban_product")[0]
        let views_left = kanban_product.getElementsByClassName('views')[0].getElementsByClassName('views_left')[0].getElementsByClassName('views_left_bottom')[0]
        let dom = kanban_product.offsetHeight/2 - 8 // 8是间距的一半
        let title = views_left.getElementsByClassName('title')[0].offsetHeight
        let form =  views_left.getElementsByClassName('form_search')[0].offsetHeight
        this.chartsH = dom - title - form - 32 - 33 
      })
    },
    setDateCur() {  // 初始化设置默认日期 30天
      let date1 = timeFormat(new Date()).split(' ')[0]
      let date2 = timeFormat(new Date(new Date().getTime() - 30*24*60*60*1000)).split(' ')[0]
      this.timePicker = [date2, date1]
      let obj = timeTransfor(this.timePicker,  this.cycle)
      this.form.local_time.value = obj.start_date + ' - '+ obj.end_date
      this.start_date = obj.start_date
      this.end_date =  obj.end_date  
    },
    getData() {
      if(!this.loading) {
        let params = setSearchParams(this.form)
        params.start_date = this.start_date
        params.end_date = this.end_date
        params.cycle = this.cycle
        this.loading = true
        this.xAxis= []
        this.seriesData = []
        productTrans(params).then(res => {
          let data = res.data
          let obj = {name: '转化率', type: 'line',barWidth: '25%', data: [], showSymbol: true }
          for(let item in data) {
            if(this.xAxis.indexOf(item) == -1) {
              this.xAxis.push(item)
            }
            data[item].value = data[item].rate
            obj.data.push(data[item])
          }
          this.seriesData.push(obj)
          this.xAxis = transforTime(this.xAxis, this.cycle) // 横轴格式转换
          this.loading = false
          this.drawEcharts()
        })
      
      }
    },
    getProductModelName () { //产品名称
      productModelNameList().then(res=>{
        if(res.state ==1){
          this.productModelNameList = res.data
        }
      })
    },
    // 重置按钮
    resetForm(){
      for(let item in this.form){
        this.form[item].value =""
      }
      this.cycle = '日'
      this.setDateCur()
      this.getData()
    },
    getSiteList(){ //站点
      siteSiteList().then(res=>{
        this.siteList = res.data
      })
    },
    changeTime (arr) { //时间选择
      if(arr) {
        let obj = timeTransfor(arr,  this.cycle)
        this.form.local_time.value = obj.start_date + ' - '+ obj.end_date
        this.start_date = obj.start_date
        this.end_date =  obj.end_date  
      } else {
        this.form.local_time.value  = null
        this.start_date = ''
        this.end_date =  ''
      }
      this.getData()
    },
    drawEcharts () {
      if(this.chart) {
        this.chart.dispose()
      }
      let dom = document.getElementById('charts_product_trans');
      this.chart = echarts.init(dom);
      let option = {
        tooltip: setEchartsTooltip(1, false, 1),
        grid: {
          left: '0%',
          right: '2%',
          bottom: 24,
          top:'4%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.xAxis,
            axisLine: {
              onZero : false,
              lineStyle:{
                color: '#666666'
              }
            },
            axisTick: {
              alignWithLabel: true
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            // max: 100,
            splitLine: { //网格线
              lineStyle: {
                color: '#EBEAEA'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }

          }
        ],
        series: this.seriesData,
        dataZoom: setEchartsOptionsDatazoom('日', this.xAxis),
        color: ['#7DCCFC', '#B1E7CB'],
        animationDuration: 1500
      };
       this.chart.setOption(option);
    }
  }

}
</script>

<style lang="scss">

#kanban .views .product_trans.views_left_bottom {
  padding: 16px 24px 16px;
}
</style>